import React from 'react'
import { Carousel } from 'antd-mobile' // 轮播图组件
import { Flex, WhiteSpace } from 'antd-mobile' // flex组件
import { Grid } from 'antd-mobile'
import request from '../../utils/request'
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
import SearchHeader from '../../components/SearchHeader'
import './index.scss' // 
import getCurrentCity from '../../utils/currentCity'
// 渲染导航栏
import { bUrl } from '../../utils/url'
const navs = [{
  id: 0,
  img: nav1,
  title: '整租',
  path: '/home/list'
}, {
  id: 1,
  img: nav2,
  title: '合租',
  path: '/home/list'
}, {
  id: 2,
  img: nav3,
  title: '地图找房',
  path: '/map'
}, {
  id: 3,
  img: nav4,
  title: '去出租',
  path: '/rent/add'
}]

export default class Index extends React.Component {
  state = {
    swipers: [],
    swipersShow: false, // 轮播图显示隐藏
    groups: [],
    news: [],
    city:  '上海'
  }
  // 钩子函数，第一次渲染后调用
  async componentDidMount() {
    // simulate img loading
    this.getSwipers()
    this.getGroups()
    this.getNews()
    // 百度地图api获取当前定位信息
    // var myCity = new window.BMap.LocalCity()
    // myCity.get(async data => {
    //   const { data: res } = await request('/area/info','GET', {params: {name: data.name}})
    //   this.setState(_ => {
    //     return {
    //       city: res.body.label
    //     }
    //   })
    // })
    const cc = await getCurrentCity()
    this.setState(  _ => { // 默认地址
      return {
        city: cc.label
      }
    })
  }
  async getSwipers () { // swipers
    const {data: res } = await request('/home/swiper', 'GET')
    this.setState(_ => {
      return {
        swipers: res.body,
        swipersShow: true
      }
    })
  }
  renderSwipers () { // 渲染轮播图ui方法
      return this.state.swipers.map(val => (
        <a
          key={val.id}
          href="http://www.alipay.com"
          style={{ display: 'inline-block', width: '100%', height: 212 }}
        >
          <img
            src={`${bUrl}${val.imgSrc}`}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
          />
        </a>
      ))}
  renderNav () { // 渲染导航栏方法
    return navs.map(item => {
      return (
            <Flex.Item key={item.id} onClick={_ => this.props.history.push(item.path)}>
                <img src={item.img} alt=""/>
                <h2>{item.title}</h2>
            </Flex.Item>
      )
    })
  } // 渲染导航栏
  async getGroups () { // 租房小组
    const { data: res } = await request('/home/groups','GET', {params: {area: 'AREA%7C88cff55c-aaa4-e2e0'}})
    this.setState(_ => {
      return {
        groups: res.body
      }
    })
  }
  async getNews () { // 资讯
    const { data: res } = await request('/home/news', 'GET' ,{params: {area: 'AREA|88cff55c-aaa4-e2e0'}})
    this.setState(_ => {
      return {
        news: res.body
      }
    })
  }
  renderNews () { // 最新资讯渲染
    return this.state.news.map(item => {
      return (<Flex.Item className='flexItem' key={item.id}>
                <img  src={`${bUrl}${item.imgSrc}`}/>
                <div className='right'>
                  <h3>{item.title}</h3>
                  <div className='bottom'>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                  </div>
                </div>
              </Flex.Item>)
    })
  }
  render() {
    return (
        <div className='index'>
          {/* 一般把渲染项目的逻辑放到函数中,外部包裹的父组件放在外面，方便管理，逻辑清晰 */}
          <div className='lun'>
          {/* 顶部导航 */}
          <SearchHeader city={this.state.city} />
          {/* 条件渲染，防止不轮播，高度丢失等问题出现 */}
          {this.state.swipersShow ? <Carousel
              autoplay
              infinite
              autoplayInterval = {3000}
            >
          { this.renderSwipers()}
          </Carousel> : ''}
          </div>
          <Flex className="nav">
            {this.renderNav()}
          </Flex>
          {/* 租房小组 */}
          <div className='gird-title'>
            <h3>租房小组</h3>
            <span>更多</span>
          </div>
          {/* renderItem 自定义渲染列，Grid内部会自动map遍历我们的数组，renderItem拿到data数组的每一个数据进行渲染 */}
          <div className='gird-main'>
            <Grid data={this.state.groups} activeStyle={true} hasLine={false} square={false} columnNum={2} renderItem={ item => {
              // item 就是 this.state.groups 的每一项
            return <Flex className='grid' key={item.id}>
                      <div className='left'>
                        <h3>{item.title}</h3>
                        <p>{item.desc}</p>
                      </div>
                      <div className='right'>
                        <img src={`${bUrl}${item.imgSrc}`}/>
                      </div>
                    </Flex>
          }}/>
          </div>
          {/* 最新资讯 */}
          <div className='news'>
            <h3>最新资讯</h3>
            <Flex className="news-main" direction={'column'}>
              {this.renderNews()}
            </Flex>
          </div>
        </div>
    )
  }
}